<template>
  <nav id="index_navbar">
    <div class="container">
      <div class="header">
        <el-link style="font-size: 18px">NewSeeker</el-link>
      </div>
      <div class="user">
        <img class="user-avatar" :src="userInfo.avatar" alt="头像">
        <div class="float-box">
          <div class="user-name">你好，{{userInfo.nickname}}</div>
          <div>个人主页</div>
          <div @click="logout">登出</div>
        </div>
      </div>
      <div class="change-color">
        <div class="color-1" @click="changeColor(1)"></div>
        <div class="color-2" @click="changeColor(2)"></div>
        <div class="color-3" @click="changeColor(3)"></div>
        <div class="color-4" @click="changeColor(4)"></div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: "index_nav",
  data() {
    return{
      userInfo: {
        nickName: '',
        avatar: ''
      }
    }
  },
  mounted() {
    this.getUserInfo();
    this.userFloatBox();
  },
  methods: {
    changeColor(color) {
      this.$store.commit("changeColor",color);
    },
    getUserInfo() {
      const self = this;
      this.$axios.get("/skill/user/getUserInfo").then(response => {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        self.userInfo.nickName = jsonObj.data.userInfo.nickName;
        self.userInfo.avatar = jsonObj.data.userInfo.avatar;
      })
    },
    userFloatBox() {
      let user = document.querySelector("#index_navbar .container .user");
      let user_box = user.querySelector(".float-box");
      user.addEventListener("click", function () {
        if (user_box.style.display === "block") {
          user_box.style.display = "none"
        } else {
          user_box.style.display = "block"
        }
      });
    },
    logout() {
      const self = this;
      this.$confirm('确定登出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$axios.get("/logout").then(response => {
          self.$router.push("/userLogin");
        })
      });

    }
  }
}
</script>

<style scoped lang="scss">
#index_navbar {
  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: rgba(0,0,0,0);
  .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px;
    margin-left: 280px;
    position: relative;
    width: 1000px;
    .header {
      float: left;
      margin-left: 50px;
    }
    .user{
      position: relative;
      width: 80px;
      display: flex;
      align-items: center;
      .user-avatar {
        box-sizing: border-box;
        z-index: 12;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
        cursor: pointer;
        background-color: rgba(0,0,0,0.2);
      }
      .float-box {
        z-index: 20001;
        display: none;
        box-sizing: border-box;
        padding: 10px 10px 10px;
        top: 50px;
        left: -45px;
        width: 140px;
        background-color: white;
        border-radius: 10px;
        text-align: left;
        position: absolute;
        box-shadow: 2px 1px 10px 0 rgba(0, 0, 0, 0.1);
        div {
          cursor: pointer;
          margin: 5px 0 10px;
          transition: 0.5s;
          &:hover {
            margin-left: 5px;
            color: #3eb3e5;
            transition: 0.5s;
          }
        }
      }
    }
    .change-color {
      z-index: 8;
      position: absolute;
      left: 450px;
      display: flex;
      width: 100px;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      div {
        cursor: pointer;
        width: 15px;
        height: 30px;
        border-radius: 5px;
        transition: 0.2s;
        &:hover{
          margin-top: 10px;
          transition: 0.2s;
        }
      }
      .color-1{
        background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
      }
      .color-2 {
        background: linear-gradient(slateblue, cornflowerblue);
      }
      .color-3{
        background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
      }
      .color-4 {
        background: url('../../../assets/images/background.jpg') no-repeat center / cover ;
      }
    }
  }
}
</style>
